import { VNode } from "./vNode";
import { util } from "./util";

(function (global) {
  class Vn {
    constructor() {
      this.el;
    }
    createVnode(tag, data, children) {
      return new VNode(tag, data, children);
    }
    createElement(vnode, options) {
      let el = options.el;
      if (!el || !document.querySelector(el)) {
        return console.error("无法找到更节点");
      }
      this.el = document.querySelector(el);
      let _createElement = (vnode) => {
        const { tag, data, children } = vnode;
        const ele = document.createElement(tag);
        this.setArr(ele, data);
        if (util._isPrimitive(children)) {
          const testEle = document.createTextNode(children);
          ele.appendChild(testEle);
        } else {
          children.map((c) => ele.appendChild(_createElement(c)));
        }
        return ele;
      };
      document.querySelector(el).appendChild(_createElement(vnode));
    }
    setArr(el, data) {
      if (!el) return;
      const attrs = data.attrs;
      if (!attrs) return;
      Object.keys(attrs).forEach((attr) => {
        el.setAttribute(attr, attrs[attr]);
      });
    }
    _sameVnode(n, o) {
      return n.tag === o.tag;
    }
    diffVnode(nVnode, oVnode) {
      if (!this._sameVnode(nVnode, oVnode)) {
        // 根节点的tag改变，直接更新所有子节点
        // ... ...
        return;
      }
      this.generateElm(oVnode);
      console.log(oVnode);
      this.patchVnode(nVnode, oVnode);
    }
    generateElm(vnode) {
      const traverseTree = (v, parentEl) => {
        let children = v.children;
        if (Array.isArray(children)) {
          children.forEach((c, i) => {
            c.elm = parentEl.childNodes[i];
            traverseTree(c, c.elm);
          });
        }
      };
      traverseTree(vnode, this.el.childNodes[0]);
    }
    patchVnode(nVnode, oVnode) {
      console.log(nVnode === oVnode)
      if (nVnode.text && nVnode.text !== oVnode.text) {
        oVnode.elm.textContent = nVnode.text;
      } else {
        const oldCh = oVnode.children;
        const newCh = nVnode.children;
        if (util._isDef(oldCh) && util._isDef(newCh)) {
          this.updateChildren(ele, newCh, oldCh);
        } else if (util._isDef(oldCh)) {
        } else {
        }
      }
    }
  }
  global.vn = new Vn();
})(window);

// 元素内容结构
let arr = [
  {
    tag: "i",
    text: 2,
  },
  {
    tag: "span",
    text: 3,
  },
  {
    tag: "strong",
    text: 4,
  },
];
let createVnode = function () {
  let _c = vn.createVnode;
  return _c(
    "div",
    {
      attrs: {
        id: "test",
      },
    },
    arr.map((a) => _c(a.tag, {}, a.text))
  );
};

const preVnode = createVnode();
vn.createElement(preVnode, { el: "#app" });

setTimeout(function () {
  arr = [
    {
      tag: "span",
      text: 1,
    },
    {
      tag: "strong",
      text: 2,
    },
    {
      tag: "i",
      text: 3,
    },
    {
      tag: "i",
      text: 4,
    },
  ];
  const newVnode = createVnode();
  vn.diffVnode(newVnode, preVnode);
}, 2000);
